<template>
    <div class="tran">
         <transition enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
            <div id="ewmDowm" v-show="ewm">
                <div class="top">
                    <h3>开通手机客户端</h3>
                    <a href="">安装指南</a>
                    <p @click="openEwm"></p>
                </div>
                <div class="center">
                    <div class="android">
                        <img :src="ewmsrc">
                        <div class="div"><span></span><h6>Android</h6></div>
                    </div>
                    <div class="iPhone">
                        <img :src="ewmsrc">
                        <div class="div"><span></span><h6>IOS</h6></div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
import ewm from '@/assets/img/ewm.jpg'
export default {
  name: "trans",
  data() {
    return {
      ewm: true,
      ewmsrc: ewm
    };
  },
  methods: {
    openEwm() {
        this.ewm=false;
    }
  }
};
</script>
<style scoped>
*{
    margin: 0;
    padding: 0;
}
#ewmDowm {
  width: 663px;
  height: 442px;
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  border: 2px solid #e49c23;
  background: url();
  z-index: 90;
}
#ewmDowm .top {
  height: 56px;
  width: 645px;
  border-bottom: 1px solid #8d8d8d;
  margin-left: 18px;
  position: relative;
}
#ewmDowm .top h3 {
  color: #fff;
  font-size: 24px;
  height: 56px;
  line-height: 56px;
  position: absolute;
  left: 2px;
}
#ewmDowm .top a {
  color: #0790df;
  text-decoration: underline;
  left: 208px;
  bottom: 13px;
  position: absolute;
}
#ewmDowm .top p {
  width: 19px;
  height: 19px;
  position: absolute;
  top: 19px;
  left: 608px;
  background: url(../img/index.png) no-repeat -202px -31px;
  cursor: pointer;
}
#ewmDowm .center {
  width: 663px;
  height: 385px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}
#ewmDowm .center .android,
#ewmDowm .center .iPhone {
  width: 222px;
  height: 265px;
  background: #cccccc;
  margin-left: 54.5px;
  margin-right: 54.5px;
}
#ewmDowm .center img {
  margin: 1px;
  width: 220px;
  height: 221px;
}
#ewmDowm .center .div {
  height: 43px;
  width: 222px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
#ewmDowm .center .div h6 {
  font-size: 18px;
}
#ewmDowm .center .div span {
  width: 30px;
  height: 35px;
  display: block;
}
#ewmDowm .center .android span {
  background: url(../img/index.png) no-repeat -234px -28px;
}
#ewmDowm .center .iPhone span {
  background: url(../img/index.png) no-repeat -273px -26px;
}
</style>


